<template>
  <page-card title="作业管理"
             sub-title="编辑"
             :need-back="true">
    <a-form :form="form"
            :label-col="{ span: 6 }"
            :wrapper-col="{ span: 12 }">
      <a-form-item label="ID"
                   v-show="false">
        <a-input v-decorator="['id']" />
      </a-form-item>
      <a-form-item label="作业名称"
                   required>
        <a-input placeholder="请输入" :maxLength="100"
                 v-decorator="['jobName',{rules: [{ pattern: /^\S*$/, message: '不可包含空格符' },{
                   required: true, message: '请输入作业名称'
                 }]}]" />
      </a-form-item>
      <a-form-item label="输入应用"
                   required>
        <a-select v-decorator="['inAppCode', {
                    rules: [{required: true, message: '请选择输入应用'
                    }]}]"
                  allowClear
                  showSearch
                  :notFoundContent="null"
                  option-filter-prop="children"
                  :filter-option="filterOption"
                  placeholder="请选择"
                  :labelInValue="true">
          <a-select-option v-for="(val,index) in this.appList"
                           :key="index"
                           :value="val.code">{{ val.name }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="输入名称"
                   required>
        <a-select v-decorator="['appInModelId', {
                    rules: [{required: true, message: '请选择输入名称'
                    }]}]"
                  allowClear
                  showSearch
                  :notFoundContent="null"
                  option-filter-prop="children"
                  :filter-option="filterOption"
                  placeholder="请选择"
                  :labelInValue="true">
          <a-select-option v-for="(val,index) in this.inputNameList"
                           :key="index"
                           :value="val.id">{{ val.name }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="解析器名称"
                   required>
        <a-select v-decorator="['translationId', {
                    rules: [{required: true, message: '请选择解析器名称'
                    }]}]"
                  allowClear
                  showSearch
                  :notFoundContent="null"
                  option-filter-prop="children"
                  :filter-option="filterOption"
                  placeholder="请选择"
                  :labelInValue="true">
          <a-select-option v-for="(val,index) in this.parserNameList"
                           :key="index"
                           :value="val.id">{{ val.name }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="输出应用"
                   required>
        <a-select v-decorator="['outAppCode', {
                    rules: [{required: true, message: '请选择输出应用'
                    }]}]"
                  allowClear
                  showSearch
                  :notFoundContent="null"
                  option-filter-prop="children"
                  :filter-option="filterOption"
                  placeholder="请选择"
                  :labelInValue="true">
          <a-select-option v-for="(val,index) in this.appList"
                           :key="index"
                           :value="val.code">{{ val.name }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="输出名称"
                   required>
        <a-select v-decorator="['appOutModelId', {
                    rules: [{required: true, message: '请选择输出名称'
                    }]}]"
                  allowClear
                  showSearch
                  :notFoundContent="null"
                  option-filter-prop="children"
                  :filter-option="filterOption"
                  placeholder="请选择"
                  :labelInValue="true">
          <a-select-option v-for="(val,index) in this.outputNameList"
                           :key="index"
                           :value="val.id">{{ val.name }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="描述">
        <a-textarea :maxLength="200"
                    placeholder="请输入描述"
                    v-decorator="['txtdesc']"
                    style="resize:none; height:85px"></a-textarea>
      </a-form-item>
      <a-form-item label="是否保存交换数据">
        <a-switch checked-children="是"
                  un-checked-children="否"
                  v-decorator="['isExchangeData', {
                    valuePropName: 'checked',
                    initialValue: true
                  }]" />
      </a-form-item>
      <a-form-item label="是否启用">
        <a-switch checked-children="是"
                  un-checked-children="否"
                  v-decorator="['status', {
                    valuePropName: 'checked',
                    initialValue: true
                  }]" />
      </a-form-item>
      <a-form-item label=" "
                   :colon="false">
        <div style="text-align:center">
          <a-button type="primary"
                    action
                    @click="handleSave">保存</a-button>
          <!-- <a-button @click="handleCancel"
                    style="margin-left:30px;">取消</a-button> -->
        </div>
      </a-form-item>
    </a-form>
  </page-card>
</template>

<script>
import { getByIdJob, saveOrUpdateJob, getOutList, getInList, getTranslationList, getAppList } from '../../../api/exchanger/index'
export default {
  name: 'JobEdit',
  data () {
    return {
      form: this.$form.createForm(this),
      idNum: '', // 页面为编辑时的id
      inputAppList: [
        // 输入应用list
        // { id: '1', name: '输入APP1' },
        // { id: '2', name: '输入APP2' },
        // { id: '3', name: '输入APP3' }
      ],
      outputAppList: [
        // 输出应用list
        // { id: '1', name: '输出APP1' },
        // { id: '2', name: '输出APP2' },
        // { id: '3', name: '输出APP3' }
      ],
      appList: [],
      inputNameList: [
        // 输入名称list
        // { id: '1', name: '输入名称1' },
        // { id: '2', name: '输入名称2' },
        // { id: '3', name: '输入名称3' }
      ],
      parserNameList: [
        // 解析器list
        // { id: '1', name: '解析器名称1' },
        // { id: '2', name: '解析器名称2' },
        // { id: '3', name: '解析器名称3' }
      ],
      outputNameList: [
        // 输出名称list
        // { id: '1', name: '输出名称1' },
        // { id: '2', name: '输出名称2' },
        // { id: '3', name: '输出名称3' }
      ]
    }
  },
  created () {
    this.idNum = this.$route.query.id
    this.getInModelList()
    this.getOutModelList()
    this.getTranslationList()
    this.getAppList()
    if (this.idNum != '') {
      this.getInfoByID(this.idNum)
    }
  },
  methods: {
    // 保存
    handleSave (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (err) {
          return
        }
        values.status = values.status ? '1' : '0'
        values.inAppName = values.inAppCode.label
        values.inAppCode = values.inAppCode.key

        values.outAppName = values.outAppCode.label
        values.outAppCode = values.outAppCode.key

        values.translationName = values.translationId.label
        values.translationId = values.translationId.key

        values.appInModelName = values.appInModelId.label
        values.appInModelId = values.appInModelId.key

        values.appOutModelName = values.appOutModelId.label
        values.appOutModelId = values.appOutModelId.key

        saveOrUpdateJob(values).then((res) => {
          // this.message.success(values.id ? '修改成功！' : '新增成功！')
          this.$router.go(-1)
        })
      })
    },
    // 根据id返回详情
    getInfoByID (id) {
      getByIdJob(id).then((res) => {
        let t = true,
          f = false
        res.status = res.status == '1' ? t : f
        this.form.setFieldsValue(res)
        this.form.setFieldsValue({
          inAppCode: { key: res.inAppCode, label: res.inAppName },
          outAppCode: { key: res.outAppCode, label: res.outAppName },
          translationId: { key: res.translationId, label: res.translationName },
          appInModelId: { key: res.appInModelId, label: res.appInModelName },
          appOutModelId: { key: res.appOutModelId, label: res.appOutModelName }
        })
      })
    },
    // 输入名称列表
    getInModelList () {
      getInList({ status: '1' }).then((res) => {
        if (res.length > 0) {
          res.map((item) => {
            item.id = item.id
            item.name = item.typeInName
          })
        }
        this.inputNameList = res || []
      })
    },
    // 输出名称列表
    getOutModelList () {
      getOutList({}).then((res) => {
        let arr = []
        if (res.length > 0) {
          res.map((item) => {
            item.id = item.id
            item.name = item.typeOutName
            if (item.status) {
              arr.push(item)
            }
          })
        }
        this.outputNameList = arr
      })
    },
    // 解析器列表
    getTranslationList () {
      getTranslationList({ status: '1' }).then((res) => {
        if (res.length > 0) {
          res.map((item) => {
            item.id = item.id
            item.name = item.translationName
          })
        }
        this.parserNameList = res || []
      })
    },
    // 应用列表
    getAppList () {
      getAppList({}).then((res) => {
        this.appList = res || []
      })
    },
    filterOption (val, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(val.toLowerCase()) >= 0
      )
    }
  }
}
</script>

<style lang="less" scoped>
</style>